<template>
    <el-table :data="dataOnTable" style="width: 100%" :row-class-name="tableRowClassName">
        <el-table-column label="预警名称" prop="warningName" />
        <el-table-column label="预警等级" prop="warningLevel" />
        <el-table-column label="预警信息" prop="warningInfo" />
        <el-table-column align="right">
            <template #header>
                <el-input v-model="search" size="small" placeholder="查询" />
            </template>
            <template #default="scope">
                <el-button size="small" type="primary" @click="handleView(scope.$index, scope.row)">查看</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog v-model="dialog" title="预警信息详情" destroy-on-close>
        <el-space direction="vertical" class="dialogSpace">
            <el-text>{{ '预警名称:' + warningNameNow }}</el-text>
            <el-text>{{ '预警等级:' + warningLevelNow }}</el-text>
            <el-text tag="mark">{{ '预警信息:' + warningInfoNow }}</el-text>
            <div style="width:400px; height:300px;">
                <maps mode="show" :zoomprop="this.zoomNow" :centerprop="this.centerNow" :pathprop="this.pathNow"></maps>
            </div>
        </el-space>
    </el-dialog>
</template>

<style scoped>
.dialogSpace {
    width: 450;
    min-height: 400;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
</style>

<style>
.el-table .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .danger-row {
    --el-table-tr-bg-color: var(--el-color-danger-light-9);
}

.el-table .primary-row {
    --el-table-tr-bg-color: var(--el-color-primary-light-9);
}
</style>

<script>
import { computed } from 'vue';
import maps from '../../../components/manager/warning/maps.vue'
import { getRequest, deleteRequest } from '../../../api/axiosAPI'

export default {
    data() {
        return {
            search: '',
            dialog: false,
            warningNameNow: null,
            warningLevelNow: null,
            warningInfoNow: null,
            zoomNow: null,
            centerNow: null,
            pathNow: null,
            tableData: []
        }
    },
    methods: {
        getAllWarnings() {
            this.tableData = [];
            getRequest('http://localhost:8022/warning/getAll', null)
                .then((response) => {
                    if (response.status === 200) {
                        return response.data;
                    } else {
                        console.log('NetWork Error!');
                    }
                }).then((data) => {
                    let tempArr = data.data;
                    console.log(tempArr);
                    for (var i = 0; i < tempArr.length; i++) {
                        let tempName = tempArr[i].name;
                        let tempLevel;
                        switch (tempArr[i].level) {
                            case 1:
                                tempLevel = '蓝色预警';
                                break;
                            case 2:
                                tempLevel = '黄色预警';
                                break;
                            case 3:
                                tempLevel = '红色预警';
                                break;
                            default:
                                tempLevel = '红色预警';
                                break;
                        }
                        let tempInfototal = tempArr[i].info;
                        let tempId = tempArr[i].warningId;
                        let tempInfo;
                        let tempZoom = tempArr[i].zoom;
                        if (tempInfototal.length > 10) {
                            tempInfo = tempInfototal.slice(0, 10) + '...';
                        } else {
                            tempInfo = tempInfototal;
                        }
                        let tempCenter = [tempArr[i].centerX, tempArr[i].centerY];
                        let coordinatesInData = tempArr[i].coordinates;
                        let tempCoordinates = [];
                        for (var j = 0; j < coordinatesInData.length; j++) {
                            tempCoordinates.push([coordinatesInData[j].coordinateX, coordinatesInData[j].coordinateY]);
                        }
                        //console.log(tempCoordinates);
                        this.tableData.push({
                            warningName: tempName,
                            warningLevel: tempLevel,
                            warningInfo: tempInfo,
                            warningInfoTotal: tempInfototal,
                            zoom: tempZoom,
                            center: tempCenter,
                            path: tempCoordinates,
                            id: tempId
                        })
                    }
                })
        },

        handleView(index, row) {
            this.warningInfoNow = row.warningInfoTotal;
            this.warningLevelNow = row.warningLevel;
            this.warningNameNow = row.warningName;
            this.zoomNow = row.zoom;
            this.centerNow = row.center;
            this.pathNow = row.path;
            //console.log(this.pathNow);
            this.dialog = true;
        },

        tableRowClassName(row, index) {
            if (row.row.warningLevel === '蓝色预警') {
                return 'primary-row';
            }
            if (row.row.warningLevel === '黄色预警') {
                return 'warning-row';
            }
            if (row.row.warningLevel === '红色预警') {
                return 'danger-row';
            }
        },

    },
    computed: {
        dataOnTable() {
            if (this.search === null || this.search === '') {
                return this.tableData;
            } else {
                return this.tableData.filter(
                    (data) => {
                        return data.warningInfoTotal.includes(this.search);
                    }
                );
            }
        }
    },
    beforeMount() {
        console.log('beforeMount...');
        this.getAllWarnings();
    }
}
</script>